popmotion

Animation

This feature allows you to animate values from a starting point to an end point. The 'onUpdate' function is called with the latest value as the animation progresses.

import { animate } from 'popmotion';

animate({
  from: 0,
  to: 100,
  onUpdate: latest => console.log(latest)
});

Gestures

This feature handles gesture physics, such as momentum and deceleration, allowing for smooth animations that feel natural. The 'modifyTarget' function can adjust the ending value dynamically.

import { inertia } from 'popmotion';

const { stop } = inertia({
  from: 0,
  velocity: 10,
  power: 0.8,
  timeConstant: 700,
  modifyTarget: target => Math.round(target / 100) * 100,
  onComplete: () => console.log('Animation complete')
});

Pose

This feature allows you to create draggable elements that can be thrown and will return to a specified position. It combines multiple functionalities like pointer tracking and spring physics for realistic motion.

import { styler, spring, listen, pointer, value } from 'popmotion';

const ball = document.querySelector('.ball');
const divStyler = styler(ball);
const ballXY = value({ x: 0, y: 0 }, divStyler.set);

listen(ball, 'mousedown touchstart').start((e) => {
  e.preventDefault();
  pointer(ballXY.get()).start(ballXY);
});

listen(document, 'mouseup touchend').start(() => {
  spring({
    from: ballXY.get(),
    velocity: ballXY.getVelocity(),
    to: { x: 0, y: 0 },
    stiffness: 200,
    damping: 10
  }).start(ballXY);
});